<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
	</head>
	<style>
		/* 通用选择器：通用效果     盒模型：内外边距 */
		*{
			margin:0;
			padding:0;
		}
		/* 1.容器：看3D视觉效果--①宽高②居中③视觉属性 */
		.container{
			width:300px;
			height:300px;
			margin: 200px auto;
			/* 视觉属性：数值px; 拉开距离 */
			perspective:3000px;
			bor der:1px solid red;
			
		}
		/* 2.魔方整体:①宽高②指定3D坐标轴{3D效果层} ③查看3D坐标轴{X,Y} ④动画 */
		.box{
			width: 300px;
			height:300px;
			/* 3D效果层：魔方上 之地那个3D坐标轴 具备X,Y,Z轴 */
			transform-style:preserve-3d;
			/* 倾斜：X 45deg Y 45deg，查看3D坐标轴 */
			transform:  rotateX(45deg) rotateY(45deg) ;
			animation: mofang .8s linear infinite;
		}
		@keyframes mofang{
			0%{
				transform:rotateX(45deg) rotateY(45deg);
			}
			70%{
				transform:rotateX(180deg) rotateY(180deg);
			}
			100%{
				transform:rotateX(360deg) rotateY(360deg);
			}
		}
		/* 3.六个面，公共属性：设定宽高，绝对定位 */
		.page{
			width: 300px;
			height: 300px;
			/* 绝对定位：6个面定到一个点，定坐标轴 */
			position:absolute;
			
		}
		/* 3.1 六个填加6个颜色 */
		.page_top{
		
			background:url(img/bear_1.png);
			/* Z轴 顶部平移150px */
			transform: translateZ(150px);
		}		
		
		.page_bottom{
			background:url(img/bear_2.png);
			transform: translateZ(-150px);
		}
		.page_left{
			background:url(img/bear_3.png);
			transform: translateX(-150px) rotateY(90deg);
		}
		
			
		.page_right{
			background:url(img/bear_4.png);
			/* X轴  向右平移 150px  按照Y轴 旋转90deg */
			transform: translateX(150px) rotateY(90deg);
		}
		.page_before{
			background:url(img/bear_5.png);
			/* Y轴 向前平移 150px按照X轴 旋转90deg */
			transform: translateY(150px) rotateX(90deg);
		}
		.page_after{
			background:url(img/bear_6.png);
			/* Y轴 向后平移 150px按照X轴 旋转90deg */
			transform: translateY(-150px) rotateX(90deg);
		}
	</style>
	<body>
		<!-- 3D魔方 1.容器：看3D效果 2.魔方整体 3.6个面 -->
		<div class="container">
			<div class="box">
				<!-- 6个面特点：①6个面宽高一致 ②颜色不一致
				 使用类选择器：多别名方式解决上述问题-->
				<div class="page page_top"></div>
				<div class="page page_bottom"></div>
				<div class="page page_left"></div>
				<div class="page page_right"></div>
				<div class="page page_before"></div>
				<div class="page page_after"></div>
			</div>
		</div>
	</body>
</html>